<template>
  <el-card class="checkHallTool" :body-style="bodyStyle">
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      label-position="right"
      label-width="90px"
    >
      <el-form-item v-if="needful.book" label="书籍名称：">
        <el-select
          v-model="form.book"
          remote
          filterable
          placeholder="书籍名称"
          size="mini"
          :remote-method="getBooks"
          :loading="loading"
          :reserve-keyword="true"
          clearable
        >
          <el-option
            v-for="item in books"
            :key="item.id"
            :label="item.bookName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="needful.filename" label="图片名称：" size="mini">
        <el-input v-model="form.filename" placeholder="图片名称" />
      </el-form-item>
      <el-form-item v-if="needful.priority" label="优先级：">
        <el-select v-model="form.priority" placeholder="优先级" size="mini">
          <el-option
            v-for="item in priorities"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="needful.user" label="标注人员：">
        <!-- <el-input v-model="form.user" placeholder="图片名称" /> -->
        <el-select
          v-model="form.user"
          remote
          filterable
          placeholder="标注人员"
          size="mini"
          :remote-method="getUsers"
          :loading="userLoading"
          :reserve-keyword="true"
          clearable
        >
          <el-option
            v-for="item in users"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="needful.date" label="校对时间：">
        <el-date-picker
          v-model="form.date"
          size="mini"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-ddTHH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">
          查询
        </el-button>
        <el-button size="mini" @click="handleClear"> 重置 </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getBookList } from '@/http/modules/book'
import { getMarkUserList } from '@/http/modules/user'
import { PRIORITY_LIST } from '@/utils/constant'
export default {
  props: {
    searchData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      bodyStyle: {
        display: 'flex',
        'justify-content': 'space-between',
        'align-items': 'center',
        'padding-bottom': '2px'
      },
      form: {},
      books: [],
      loading: false,
      userLoading: false,
      users: [],
      priorities: PRIORITY_LIST
    }
  },
  computed: {
    needful() {
      const keys = Object.keys(this.searchData)
      const needful = {}
      keys.forEach(key => (needful[key] = true))
      return needful
    }
  },
  methods: {
    handleSearch() {
      const vm = this
      const json = {}
      for (const item in vm.needful) {
        json[item] = vm.form[item]
      }
      console.log(json)
      vm.$emit('search', json)
    },
    handleClear() {
      const vm = this
      vm.form = {}
      vm.handleSearch()
    },
    getBooks(query) {
      const vm = this
      if (query !== '') {
        this.loading = true
        vm.getBookList({ bookName: query }).then(res => {
          this.loading = false
          this.books = res.items
        })
      } else {
        this.books = []
      }
    },
    getBookList(obj) {
      return getBookList(1, 1000, obj)
    },
    getUsers(query) {
      const vm = this
      if (query !== '') {
        this.userLoading = true
        vm.getMarkUserList(query).then(res => {
          this.userLoading = false
          this.users = res.items
        })
      } else {
        this.users = []
      }
    },
    getMarkUserList(name) {
      return getMarkUserList(name)
    }
  }
}
</script>

<style lang="scss" scoped>
.checkHallTool {
  margin-bottom: 16px;
}
</style>
